<div class="horizontal-scroll" ba-panel ba-panel-title="Editable Cells" ba-panel-class="with-scroll">
    <table class="table table-hover" st-table="editableTableData">
        <thead>
        <tr class="sortable">
            <th class="table-id" st-sort="id" st-sort-default="true">#</th>
            <th st-sort="firstName">First Name</th>
            <th st-sort="lastName">Last Name</th>
            <th st-sort="username">Username</th>
            <th st-sort="email">Email</th>
            <th st-sort="age">Age</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in editableTableData" class="editable-tr-wrap">
            <td class="table-id">{{item.id}}</td>
            <td><span editable-text="item.firstName" blur="cancel">{{item.firstName}}</span></td>
            <td><span editable-text="item.lastName" blur="cancel">{{item.lastName}}</span></td>
            <td><span editable-text="item.username" blur="cancel">{{item.username}}</span></td>
            <td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td>
            <td><span editable-text="item.age" blur="cancel">{{item.age}}</span></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="6" class="text-center">
                <div st-pagination="" st-items-by-page="12" st-displayed-pages="5"></div>
            </td>
        </tr>
        </tfoot>
    </table>
</div>